<template>
  <div class="createFormHeader">
    <Form :disabled="true" inline :label-width="80">
      <Form-item label="表单名称">
        <Input type="text" v-model="initialFormData.name" placeholder="请输入表单名称"></Input>
      </Form-item>
      <Form-item label="所属菜单">
        <Cascader
          v-model="initialFormData.menu"
          :data="menuList"
          :renderFormat="format"
          transfer
          :clearable="false"
        >
        </Cascader>
      </Form-item>
      <Form-item label="备注">
        <Input type="text" v-model="initialFormData.remark"></Input>
      </Form-item>
    </Form>
    <Form :model="initialFormData" :disabled="disabled" ref="approvalForm" :label-width="100">
      <div class="title">
        <div class="block"></div>
        <div class="text">填表说明</div>
      </div>
      <div class="tip">
        <Input type="textarea" maxlength="1000" v-model="formData.tip" placeholder="请输入填表说明，限制1000字"></Input>
        <div class="upload" style="width: 25%;height: 60px;margin-left:4px">
          <el-upload
            :disabled="isPreview"
            :limit="1"
            ref="upload"
            :action="uploadUrl"
            :headers="uploadHeaders"
            :data="uploadData"
            :max-size="10240"
            :on-success="handleTipSuccess"
            :on-error="handleError"
            :on-remove="handlerTipRemove"
            :show-file-list="true"
            :file-list="formData.tipFile || []"
            :on-preview="downLoad"
          >
            <div>
              添加填表说明附件
              <Tooltip
                transfer
                max-width="800"
                content="仅支持上传一个附件，若需要上传多个，请以压缩包的形式上传"
                placement="right"
                slot
                ><Icon type="ios-help-circle"
              /></Tooltip>
            </div>
          </el-upload>
        </div>
      </div>
    </Form>
  </div>
</template>

<script>
import dataEleApi from '@/api/dataElement'
import coverApi from '@/api/cover'
import { mapState } from 'vuex'
export default {
  data() {
    return {
      uploadHeaders: { authorization: localStorage.Authorization ? `Bearer ${localStorage.Authorization}` : '' },
      uploadUrl: dataEleApi.getDataUploadUrl(),
      uploadData: { bizId: '0' },
      formData: {
        name: '',
        menu: [],
        remark: '',
        tip: '',
        tipFile: []
      }
    }
  },
  props: {
    initialFormData: {
      type: Object,
      default: () => ({
        name: '',
        menu: [],
        remark: '',
        tip: '',
        tipFile: []
      })
    },
    disabled: {
      type: Boolean,
      default: false
    },
    isPreview: {
      type: Boolean,
      default: false
    },
  },
  computed: {
    ...mapState(['menuList']),
  },
  methods: {
    format(labels) {
      const index = labels.length - 1
      return labels[index]
    },
    handleTipSuccess(response, file) {
      this.formData.tipFile.push({ name: file.name, fileId: response.data })
      this.$message.success('上传成功')
    },
    handleError(err) {
      // 文件上传失败的回调函数，可以在这里处理上传失败的情况
      this.$message.error('上传失败' + err)
    },
    handlerTipRemove(file) {
      let index = this.formData.tipFile.findIndex(item => item.fileId === file.fileId)
      this.formData.tipFile.splice(index, 1)
      this.$message.success('删除成功')
    },
    downLoad(file) {
      coverApi.plantaskDownloadFile(file.fileId)
    },
  },
  created() {
    this.formData = { ...this.initialFormData }
  }
}
</script>

<style lang="less" scoped>
.createFormHeader {
  .title {
    margin-top: -10px;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    color: var(--primary-color);
    .block {
      width: 6px;
      height: 24px;
      background: var(--primary-color);
      margin-right: 6px;
    }
    .text {
      font-weight: 500;
      font-size: 16px;
    }
  }
  .tip {
    display: flex;
    margin-bottom: 8px;
    justify-content: space-between;
  }
  .upload {
    color: var(--primary-color);
    &:hover {
      cursor: pointer;
    }
  }
}
</style>